import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/layout/Home.vue';
import Login from '../views/layout/Login.vue';
import store from '../store/index';
import getRole from "../utils/getRoleRoutes";
Vue.use(VueRouter);

const asyncRoutes = [
    {
        path: '/goods',
        name: 'Goods',
        component: Home,
        meta: {
            title: '商品',
            hidden: false,//是否隐藏，默认false不隐藏
            type: 'shop',
        },
        children: [
            {
                path: 'list',
                name: 'GoodsList',
                component: () => import("@/views/layout/page/GoodsList.vue"),
                meta: {
                    title: '商品列表',
                    hidden: false,
                    type: 'unordered-list',// 图标类型
                },
            },
            {
                path: 'add',
                name: 'GoodsAdd',
                component: () => import("@/views/layout/page/GoodsAdd.vue"),
                meta: {
                    title: '添加商品',
                    hidden: false,
                    type: 'file-add',
                },
            },
            {
                path: 'edit/:id',
                name: 'GoodsEdit',
                component: () => import("@/views/layout/page/GoodsAdd.vue"),
                meta: {
                    title: '编辑商品',
                    hidden: true,
                    type: 'file-add',
                },
            },
            {
                path: 'category',
                name: 'Category',
                component: () => import("@/views/layout/page/Category.vue"),
                meta: {
                    title: '商品类目',
                    hidden: false,
                    type: 'eidt',
                },
            }
        ],
    }
];
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
        redirect: '/index',//重定向****************

        meta: {
            title: '首页',
            hidden: false,
            type: 'home',
        },
        // 嵌套子路由
        children: [
            {
                path: 'index',
                name: 'Index',
                component: () => import("@/views/layout/page/Index.vue"),
                meta: {
                    title: '统计',
                    hidden: false,
                    type: 'number',
                },
            }
        ],
    },
    {
        path: '/login',
        name: 'Login',
        component: Login,
        meta: {
            title: '登录',
            hidden: true,
            type: "login",
        },
    }
];

const router = new VueRouter({
    routes,
});
// 路由导航
let isLoaded = false;
router.beforeEach((to, from, next) => {
    // console.log(to.path);
    if (to.path !== '/login') {
        if (store.state.user.appkey && store.state.user.role && store.state.user.username) {
            if (!isLoaded) {
                let resp = getRole(store.state.user.role, asyncRoutes);
                // 左侧菜单栏不显示登录，过滤掉login
                // let hiddenRoutes = routes.concat(resp).filter((r) => {
                //     if (r.meta.hidden == false) {
                //         r.children = r.children.filter((r) => {
                //             return r.meta.hidden == false;
                //         })
                //         return true;
                //     }
                // })
                // 都是异步的方式，等到执行完成在跳转
                store.dispatch("setMenuRoutes", routes.concat(resp)).then(() => {
                    // router.addRoutes(resp);//动态添加路由
                    resp.forEach(item => {
                        router.addRoute(item);
                    });
                    next({ ...to })
                });
                // 如果使用下边这个就需要在Menu组件通过v-if的方法过滤, v-if="!item.meta.hidden"
                // store.dispatch("setMenuRoutes", routes.concat(resp));
                isLoaded = true;
            }
            next();
        } else {
            next('/login');
        }
    }
    next();
});

export default router;
